<template>
  <!-- 维尚优选 -->
  <view>
    <shopHome v-if="currentPage === 0"></shopHome>
    <shopGoods v-if="currentPage === 1"></shopGoods>
    <shopCarts v-if="currentPage === 2"></shopCarts>
    <shopMy v-if="currentPage === 3"></shopMy>
    <!-- 底部导航-tab组件 -->
    <customTabMeun 
      :current="currentPage" 
      :tabsItem="tabMeunData"
      @switchTabNav="changePageTab"
      
    ></customTabMeun>
  </view>
</template>

<script setup>
  import shopHome from "/pages/wsShopping/tabPages/home/home.vue"
  import shopGoods from "/pages/wsShopping/tabPages/goods/goods.vue"
  import shopCarts from "/pages/wsShopping/tabPages/carts/carts.vue"
  import shopMy from "/pages/wsShopping/tabPages/my/my.vue"
  import customTabMeun from "/components/custom-tab-bar/custom-tab-meun.vue"
  import { ref } from "vue";
  
  const currentPage = ref(0)
  const changePageTab = (index)=>{
    currentPage.value = index
  }
  // tab导航数据
  const tabMeunData = ref([
    {
      text: "首页",
      iconPath: "home",
      selectedIconPath: "home-filled",
    }, {
      text: "商品",
      iconPath: "shop",
      selectedIconPath: "shop-filled",
    },  {
      text: "购物车",
      iconPath: "cart",
      selectedIconPath: "cart-filled",
    },  {
      text: "我的",
      iconPath: "person",
      selectedIconPath: "person-filled",
    }
  ])
  
</script>

<style lang="scss">
         
</style>
